<template>
  <div class="checkout-address">
    <div class="default" v-if="showAddress.id">
      <dl>
        <dt>收<i></i>货<i></i>人：</dt>
        <dd>{{showAddress.receiver}}</dd>
      </dl>
      <dl>
        <dt>联系方式：</dt>
        <dd>{{showAddress.contact|vagueMobile}}</dd>
      </dl>
      <dl>
        <dt>收货地址：</dt>
        <dd>{{showAddress.fullLocation.replace(/ /g,'')}}{{showAddress.address}}</dd>
      </dl>
    </div>
    <div class="default" v-else>
      <p class="none">您还没有收货地址，请添加一个收货地址。</p>
    </div>
    <div class="update">
      <a href="javascript:;" v-if="showAddress.id" @click="edit">修改地址</a>
    </div>
    <div class="other">
      <a href="javascript:;" @click="openListDialog">切换地址</a>
      <a href="javascript:;" @click="add">添加地址</a>
    </div>
    <!-- 切换地址 -->
    <xtx-dialog @on-submit="confirmAddress" :visible.sync="visibleListDialog" width="800px" submitText="确认" title="切换地址">
      <div @click="selectedAddressId=item.id" class="default item" :class="{selected:item.id===selectedAddressId}" v-for="item in list" :key="item.id">
        <dl>
          <dt>收<i></i>货<i></i>人：</dt>
          <dd>{{item.receiver}}</dd>
        </dl>
        <dl>
          <dt>联系方式：</dt>
          <dd>{{item.contact|vagueMobile}}</dd>
        </dl>
        <dl>
          <dt>收货地址：</dt>
          <dd>{{item.fullLocation.replace(/ /g,'')}}{{item.address}}</dd>
        </dl>
        <i v-if="item.isDefault===0">默认地址</i>
      </div>
    </xtx-dialog>
    <!-- 添加&修改 -->
    <address-new ref="addressNew" :address="currentAddress" @on-complete="updateList"></address-new>
  </div>
</template>

<script>
import AddressNew from '@/views/member/address/components/address-new'
export default {
  name: 'checkout-address',
  components: { AddressNew },
  data () {
    return {
      list: [],
      selectedAddressId: '',
      selectedAddress: {},
      visibleListDialog: false,
      // 添加修改
      currentAddress: {}
    }
  },
  computed: {
    showAddress () {
      if (this.selectedAddress.id) {
        return this.selectedAddress
      }
      const item = this.list.find(item => item.isDefault === 0)
      if (item) {
        return item
      } else {
        return this.list[0] || {}
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data } = await this.$http.get('member/address')
      this.list = data.result
    },
    confirmAddress () {
      this.selectedAddress = this.list.find(item => item.id === this.selectedAddressId)
      this.visibleListDialog = false
    },
    openListDialog () {
      this.visibleListDialog = true
      this.selectedAddressId = ''
    },
    edit () {
      this.currentAddress = this.showAddress
      this.$nextTick(() => {
        this.$refs.addressNew.open()
      })
    },
    add () {
      if (this.list.length >= 10) {
        return this.$message({ type: 'warn', message: '最多添加10条' })
      }
      this.currentAddress = {}
      this.$nextTick(() => {
        this.$refs.addressNew.open()
      })
    },
    updateList (form) {
      const item = this.list.find(item => item.id === form.id)
      if (item) {
        for (const key in item) {
          item[key] = form[key]
        }
      } else {
        this.list.unshift(form)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.checkout-address {
  display: flex;
  align-items: center;
  padding: 20px;
  border:1px solid #f5f5f5;
  .default {
    flex: 1;
    &.item {
      padding: 10px 20px;
      border: 1px solid #e4e4e4;
      margin-bottom: 20px;
      position: relative;
      i {
        position: absolute;
        top: 15px;
        right: 20px;
        color: @xtxColor;
      }
    }
    &.selected {
      background-color: #e3f9f4;
      border-color: @xtxColor;
    }
    dl {
      line-height: 30px;
      display: flex;
      dt {
        width: 80px;
        color: #999;
        i {
          display: inline-block;
          width: 0.5em;
        }
      }
      dd {
        flex: 1;
      }
    }
  }
  .update {
    width: 160px;
    border-right: 1px solid #f5f5f5;
    padding: 0 40px;
    display: flex;
    align-self: stretch;
    align-items: center;
    a {
      color: @xtxColor;
    }
  }
  .other {
    width: 420px;
    text-align: center;
    a {
      width: 140px;
      height: 46px;
      border: 1px solid #e4e4e4;
      border-radius: 4px;
      display: inline-block;
      line-height: 44px;
      color: #666;
      margin-left: 10px;
    }
  }
  .none {
    color:#999;
    padding:30px;
    line-height:30px;
  }
}
</style>
